<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133296718-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133296718-1');
    </script>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="../../images/webpage/icon.png">

    <title>Princess Connect! Re:Dive - Quest Helper | Character Data</title>
    <meta name="title" content="Princess Connect! Re:Dive - Quest Helper | Character Data"/>

    <!-- META DATA -->
    <meta name="description" content="Character data used in priconne-quest-helper, a tool for that provides quest choosing assistance and project management for the game 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）.">
    <meta name="author" content="S'pugn">
    <meta name="keywords" content="Princess Connect Re:Dive, プリンセスコネクト! Re:Dive, Quest Helper, S'pugn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- OPEN GRAPH / FACEBOOK META DATA -->
    <meta property="og:title" content="Princess Connect! Re:Dive - Quest Helper | Character Data"/>
    <meta property="og:description" content="priconne-quest-helper's Currently Loaded Character Data."/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://raw.githubusercontent.com/Expugn/priconne-quest-helper/master/images/webpage/icon.png"/>
    <meta property="og:image:width" content="64"/>
    <meta property="og:image:height" content="64"/>
    <meta property="og:url" content="https://expugn.github.io/priconne-quest-helper/pages/character-data/"/>
    <meta property="og:locale" content="en_US"/>

    <!-- TWITTER META DATA -->
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@eSpugn"/>
    <meta name="twitter:creator" content="@eSpugn"/>
    <meta name="twitter:title" content="Princess Connect! Re:Dive - Quest Helper | Character Data"/>
    <meta name="twitter:description" content="priconne-quest-helper's Currently Loaded Character Data."/>

    <!-- SCRIPTS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../../vendor/modernizr/modernizr-custom.js"></script> <!-- WEBP CHECK -->
    <script src="../../scripts/priconne-data.js"></script>

    <!-- CSS STYLE SHEETS -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="../../css/spritesheet.css">
    <link rel="stylesheet" href="../../css/data.css">
</head>
<body>
<noscript>
    <style type="text/css">
        div {display: none;}
        hr {display: none;}
        footer {display: none;}
    </style>
    <h1 style="color: white; font-family: 'Trebuchet MS', Arial, serif; text-align:center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px #000000;">
        <span style="color: orangered;">JavaScript is disabled!</span>
        <br><br>
        <span style="color: deepskyblue;">priconne-quest-helper/character-data/</span> cannot function without JavaScript.
        <br><br>
        <span style="color: #ffdf73;">Please enable JavaScript to continue!</span>
    </h1>
</noscript>

<div>
    <h1 class="title main_title">Princess Connect! Re:Dive - Quest Helper</h1>
    <h2 class="title sub_title">Character Data</h2>
    <h1 class="title simple_title">priconne-quest-helper &boxv; Character Data</h1>
</div>
<div id="back" onclick="toggle_grid()" hidden>&larrhk;</div>

<hr>
<div id="character-grid"></div>
<div id="character-data" hidden></div>
<hr>
</body>

<footer>
    <p class="footer">
        Made With <span class="heart-red">❤</span> By S'pugn
        <i class="footer webpage webpage-HAhaa"></i>
    </p>
</footer>

<script>
    function get_item_sprite_class(item_name) {
        if (item_name === "") {
            return "disabled";
        }
        return "is__" + item_name.replace("'", "").replace(/\W/g, '-').toLowerCase().replace('---', '-');
    }
    function get_unit_sprite_class(unit_id) {
        return "us__" + unit_id.replace(/_/g, '-').toLowerCase().replace('---', '-');
    }
    function get_unit_icon_image_path(file_name = "") {
        file_name = file_name.split(' ').join('_');
        return "../../images/unit_icon" + ($("html").hasClass("webp") ? "_webp/" + file_name + ".webp" : "/" + file_name + ".png");
    }
    function toggle_grid() {
        const grid = document.getElementById("character-grid"),
            data = document.getElementById("character-data"),
            back = document.getElementById("back");
        grid.hidden = !grid.hidden;
        data.hidden = back.hidden = !data.hidden;
    }


    window.onload = function () {
        character_data.read_data(function (success) {
            if (success)
                build_grid();
            else
                document.getElementById("character-grid").innerHTML = "failed to read character data";
        });

        function build_grid() {
            const char_data = character_data.data();

            for (const unit_id in char_data) {
                let unit_icon = document.createElement("i");
                unit_icon.classList.add("unit-sprite", get_unit_sprite_class(unit_id));
                unit_icon.title = char_data[unit_id]["name"] + (char_data[unit_id]["thematic"] !== "" ? " (" + char_data[unit_id]["thematic"] + ")" : "");
                unit_icon.id = unit_id;
                unit_icon.onclick = function() {
                    get_data(unit_id);
                };

                document.getElementById("character-grid").appendChild(unit_icon);
            }
        }

        function get_data(unit_id) {
            const unit_data = character_data.data()[unit_id],
                  data_div = document.getElementById("character-data"),
                  unit = document.createElement("div");
            data_div.innerHTML = "";

            const unit_name = unit_data["name"],
                  unit_thematic = unit_data["thematic"],
                  has_thematic = unit_thematic !== "";

            let name_div = document.createElement("div"),
                name_en_div = document.createElement("span"),
                name_jp_div = document.createElement("span");
            name_div.classList.add("name");
            name_en_div.innerText = unit_name + (has_thematic ? "\n(" + unit_thematic + ")" : "");
            name_en_div.classList.add("name_en");
            name_jp_div.innerText = unit_data["name_jp"] + (has_thematic ? "\n（" + unit_data["thematic_jp"] + "）" : "");
            name_jp_div.classList.add("name_jp");
            name_div.appendChild(name_en_div);
            name_div.appendChild(name_jp_div);
            unit.appendChild(name_div);

            let img = document.createElement("img");
            img.src = get_unit_icon_image_path((has_thematic ? unit_thematic + " " : "") + unit_name);
            unit.appendChild(img);

            let ranks = document.createElement("div");
            ranks.classList.add("ranks");
            for (let i = 1 ; unit_data["rank_" + i] !== undefined ; i++) {
                const rank_data = unit_data["rank_" + i];
                let rank = document.createElement("div");
                rank.classList.add("rank", ("rank-" + i));

                let title = document.createElement("span");
                title.innerText = "Rank " + i;
                rank.appendChild(title);

                let items = document.createElement("div");
                for (let j = 0, k = rank_data.length ; j < k ; j++) {
                    let item = document.createElement("i");
                    item.classList.add("item-sprite", get_item_sprite_class(rank_data[j]));
                    item.title = rank_data[j];
                    items.append(item);
                }
                rank.appendChild(items);

                unit.append(rank);
            }

            toggle_grid();
            data_div.appendChild(unit);
            data_div.hidden = false;
            window.scrollTo(0, 0);
        }
    }
</script>
</html>